<template>
  <li class="search-event">
    <a href="#">查询事件</a>
    <img class="arrow-down" src="../../../../assets/icon/arrowDown.svg" alt="" />
    <div class="hidden">
      <div class="dropdown-content">
        <span v-if="isSearch" @click="queryEvent">搜索查询</span>
        <span v-else @click="cancelSearch">取消搜索</span>
        <span v-if="isBox" @click="boxSelectQuery">框选查询</span>
        <span v-else @click="cancelSearch">取消框选</span>
        <span @click="showCharts">统计图</span>
        <thermal-map></thermal-map>
      </div>
    </div>
  </li>
  <div class="searchInput" v-if="inputShow">
    <el-input
      v-model.trim.lazy="address"
      placeholder="请输入事件相关地点"
      @keyup.enter="handleSearch"
    >
      <template #append>
        <img @click="handleSearch" class="search-icon" src="../../../../assets/icon/search.svg" />
      </template>
    </el-input>
  </div>
  <div id="popup" @click.self="hiddenPopup">
    <div class="top">
      <div>事件详细信息</div>
      <button @click="hiddenPopup">X</button>
    </div>
    <table class="event-info" v-if="eventTitle">
      <tr>
        <th>{{ eventTitle[1] }}</th>
        <td>{{ eventContent[1] }}</td>
      </tr>
      <tr>
        <th>{{ eventTitle[3] }}</th>
        <td>{{ eventContent[3] }}</td>
      </tr>
      <tr>
        <th>{{ eventTitle[4] }}</th>
        <td>{{ eventContent[4] }}</td>
      </tr>
      <tr>
        <th>{{ eventTitle[7] }}</th>
        <td>{{ eventLevel(eventContent[7]) }}</td>
      </tr>
    </table>
  </div>
  <query-table @change-show="(data) => (dialogIsShow = data)"></query-table>
  <all-data-table v-if="isShowCharts"></all-data-table>
</template>

<script setup>
import { searchEventByDirver, isSearch } from './Hooks/useSearchByDirver'
import { queryByDraw, isBox } from './Hooks/useSearchByDraw'
import { high_source } from './Hooks/useMapSourceLayer'
import { popupShow, eventTitle, eventContent } from './Hooks/usePopup'
import QueryTable from './components/QueryTable.vue'
import AllDataTable from './components/AllDataCharts/AllDataCharts.vue'
import { isShowCharts, showCharts } from './components/AllDataCharts/Hooks/useShowCharts'
import ThermalMap from './components/ThermalMap.vue'

let map = ref()
// 接收子组件传递过来的参数
let dialogIsShow = ref()
watch(
  () => dialogIsShow.value,
  () => {
    if (dialogIsShow.value) {
      let popup = document.querySelector('#popup')
      popup.style.display = 'none'
    }
  }
)
onMounted(() => {
  map.value = useGlobalMap()
})
// 以下为查询事件
let query_layer = ref(null)
// 点击事件的回调函数
let Popupclick = ref()
// 输入框显示
let inputShow = ref(false)
// 搜索框输入内容
let address = ref('')
// 点击查询
function queryEvent() {
  isSearch.value = false
  inputShow.value = true
}
// 取消搜索
function cancelSearch() {
  // popup弹窗消失
  let popup = document.querySelector('#popup')
  popup.style.display = 'none'
  isBox.value = true
  map.value.un('click', Popupclick.value)
  if (myDraw.value) {
    map.value.removeInteraction(myDraw.value)
  }
  map.value.removeLayer(query_layer.value)
  isSearch.value = true
  inputShow.value = false
  high_source.clear()
  // 取消查询就移除图层
  map.value.getOverlays().clear()
  map.value.removeLayer(query_layer.value)
}

// 搜索事件
function handleSearch() {
  high_source.clear()
  if (address.value) {
    const { high_layer } = searchEventByDirver(map.value, address.value)
    address.value = ''
    query_layer.value = high_layer
    Popupclick.value = popupShow(map.value)
    inputShow.value = false
  } else {
    ElMessage({
      showClose: true,
      message: '请输入合法地点',
      type: 'warning',
      duration: 1000
    })
  }
}
// 转换事件处理状态
const eventLevel = computed(() => {
  return (status) => {
    switch (status) {
      case '0':
        return '未处理'
      case '1':
        return '处理中'
      case '2':
        return '已处理'
    }
  }
})
// 点击关闭弹窗
function hiddenPopup() {
  let popup = document.querySelector('#popup')
  popup.style.display = 'none'
}

// 以下为拉框查询
let myDraw = ref()
function boxSelectQuery() {
  const { high_layer, draw } = queryByDraw(map.value)
  // popupShow()
  Popupclick.value = popupShow(map.value)
  query_layer.value = high_layer
  myDraw.value = draw
}
// 取消框选
/* function cancelDraw() {
  isBox.value = true
  if (myDraw.value) {
    map.value.removeInteraction(myDraw.value)
  }
  high_source.clear()
  map.value.removeLayer(query_layer.value)
} */
</script>

<style lang="less">
@import url('./css/searchEvent.less');
</style>
